<template>
    <div class="system-file-container layout-pd">
        <div class="system-file-padding layout-padding-auto layout-padding-view">
            <div class="system-file-search mb15">
                <el-form :inline="true" v-model="state.dataForm">
                    <el-form-item label="原始文件名" prop="original">
                        <el-input v-model="state.dataForm.original" size="default" placeholder="请输入文件名"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="default" type="primary" class="ml10" @click="state.getDataList()">
                            <el-icon>
                                <ele-Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button size="default" type="primary" class="ml10" @click="uploadDialogRef.init()">上传</el-button>
                        <el-button size="default" type="primary" class="ml10">重置</el-button>
                    </el-form-item>

                </el-form>
            </div>
            <el-table :data="state.dataList" v-loading="state.dataListLoading" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" align="center"/>
                <el-table-column prop="original" label="原始文件名" align="center"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="fileName" label="文件名" align="center"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="bucketName" label="存储桶" align="center"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="fileSize" label="文件大小" align="center"></el-table-column>
                <el-table-column align="center" label="文件路径" prop="path" show-overflow-tooltip=""/>
                <el-table-column align="center" label="操作">
                    <template v-slot="scope">
                        <el-button link type="primary" @click="state.deleteHandle(scope.row.id)"><el-icon><ele-Delete /></el-icon>删除</el-button>
                        <el-button link type="primary">编辑</el-button>
                        <el-button link type="primary">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="state.page" :page-size="state.limit"
                           :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                           class="mt15"
                           @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"/>
        </div>
        <UploadDialog ref="uploadDialogRef"/>
    </div>
</template>

<script setup lang="ts" name="systemFile">
import {defineAsyncComponent, reactive, toRefs} from 'vue';
import useView from "/@/hooks/useView";
import ApiConfig from "/@/api/ApiConfig";
import {ref} from "vue-demi";

const view = reactive({
    getDataListURL: ApiConfig.SYSTEM.FILE_PAGE,
    getDataListIsPage: true,
    deleteURL: ApiConfig.SYSTEM.FILE,
    deleteIsBatch: true,
    dataForm: {
        original: ''
    },
    configVisible: false,
    uploadVisible: false
});

const state = reactive({...useView(view), ...toRefs(view)});

// 引入组件
const UploadDialog = defineAsyncComponent(() => import('/@/views/system/file/upload.vue'));
const uploadDialogRef=ref()

const uploadHandler = () => {
  uploadDialogRef.value.init()
}
</script>

<style scoped lang="scss">
.system-file-container {
    .system-file-padding {
        padding: 15px;

        .el-table {
            flex: 1;
        }
    }
}
</style>
